<div class="tab-pane">
    <media-navs prefix="'article_nav'" data="$ctrl.article.mediaNavs"></media-navs>
</div>
<!--activeMedias
        <h6>List items</h6>
        <div class="row">
            <div class="col-md-8">
                <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                    <div class="btn-group mr-2" role="group" aria-label="First group">
                        <button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".upload-image-modal-lg"><i class="mi mi-Add"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="mi mi-ViewAll"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="mi mi-List"></i></button>
                        <button type="button" class="btn btn-secondary"><i class="mi mi-TabletSelected"></i></button>
                    </div>
                    <div class="btn-group mr-2" role="group" aria-label="Button group with nested dropdown">
                        <div class="btn-group" role="group">
                            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                All media types
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <a class="dropdown-item" href="#">All media types</a>
                                <a class="dropdown-item" href="#">Images</a>
                                <a class="dropdown-item" href="#">Audios</a>
                                <a class="dropdown-item" href="#">Videos</a>
                                <a class="dropdown-item" href="#">Documents</a>
                                <a class="dropdown-item" href="#">Zips</a>
                                <a class="dropdown-item" href="#">Others</a>
                            </div>
                        </div>
                    </div>
                    <div class="btn-group mr-2" role="group" aria-label="Button group with nested dropdown">
                        <div class="btn-group" role="group">
                            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                All times
                            </button>
                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                <a class="dropdown-item" href="#">Jan 2018</a>
                                <a class="dropdown-item" href="#">Dec 2017</a>
                                <a class="dropdown-item" href="#">Nov 2017</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <div class="input-group-text" id="btnGroupAddon">
                            <i class="mi mi-Search btn-search-media" ng-click="$ctrl.loadMedias()" style="top:0;cursor:pointer;"></i>
                        </div>
                    </div>
                    <input type="text" ng-model="request.keyword" ng-enter="$ctrl.loadMedias()" class="form-control media-keyword" placeholder="Search media items..." aria-label="Search media items..." aria-describedby="btnGroupAddon">
                </div>
            </div>
        </div>
    
        <div class="card-columns" style="column-count: 3 !important;column-gap: 0.75rem;">
            <div class="card" ng-repeat="media in $ctrl.medias.items" ng-hide="media.isHidden">
                <span class="switch switch-sm position-absolute m-1">
                    <input type="checkbox" class="switch" ng-model="media.isActived" ng-change="$ctrl.activeMedia(media)" id="Media_Image_{{media.id}}" value="true">
                    <label class="switch m-0" for="Media_Image_{{media.id}}">
                        @* {{media.title}} {{$ctrl.medias.totalPage}}*@
                    </label>
                </span>
                <div class="btn-group btn-group-sm position-absolute m-1" role="group" aria-label="Basic example" style="z-index:3; right:0;">
                    <button class="btn btn-light custom-file-cropper" data-toggle="modal" data-target=".image-crop-modal-lg" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}">
                        <i class="mi mi-Crop"></i>
                    </button>
                    <button class="btn btn-light btn-sm" data-imgsrc="{{media.fullPath}}" data-imgid="{{media.id}}" ng-click="removeMedia(media.id)">
                        <i class="mi mi-Delete"></i>
                    </button>
                </div>
                <a href="#" data-toggle="modal" data-target=".image-preview-modal-lg" data-imgsrc="{{media.fullPath}}">
                    <img class="card-img-top" ng-src="{{media.fullPath}}" alt="{{media.title}}">
                </a>
            </div>
        </div>
        <nav aria-label="Page navigation">
            <ul class="pagination pagination-sm pull-right">
                <li class="page-item">
                    <a class="page-link active" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex-1)" ng-hide="$ctrl.medias.pageIndex==0">Prev</a>
                </li>
                <li class="page-item" ng-class="{active: n-1==$ctrl.medias.pageIndex}" ng-repeat="n in range($ctrl.medias.totalPage)"><a class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias(n-1)">{{n}}</a></li>
                <li class="page-item">
                    <a class="page-link" href="javascript:void(0)" ng-click="$ctrl.loadMedias($ctrl.medias.pageIndex + 1)" ng-hide="$ctrl.medias.pageIndex >= ($ctrl.medias.totalPage-1)">Next</a>
                </li>
            </ul>
        </nav>
    </div>-->
